<template>
   
       <p>这是一个组件</p>
       {{ msg }}
       <div v-html="htmlSpan"></div>
       <!-- <img src="//www.baidu.com/img/flexible/logo/pc/index@2.png" alt=""> -->
       <!-- <img v-bind:src="imgUrl" alt=""> -->
       <!-- <img :src="imgUrl" alt=""> -->
       <button v-on:click="btnAction">点坤</button>
       <button @click="btnAction">点坤2.0</button>
       <h1> v-if</h1>
       <p v-if="isActive">v-if is truetruetruetruetruetrue</p>
       <p v-else>v-if is falsefalsefalsefalsefalse</p>
       <p v-show="isActive">v-show</p>
       <button @click="switcgInsActive">切换状态</button>

       <p v-if="num == 0">num is 0</p>
       <p v-if="num == 1">num is 1</p>
       <p v-else>num 非0 非1</p>
       <button @click="changeNUm(0)">num 设置为 0</button>
       <button @click="changeNUm(1)">num 设置为 1</button>
       <button @click="changeNUm(2)">num 设置为 2</button>
       <p v-for="(item,index) in arr">item是{{ item }},index是{{  index }}</p>
       <p v-for="(value,key,index) in obj">value是{{ value }},key是{{ key }},index是{{  index }}</p>
       <h1>v-model</h1>


       <h2>配置信息</h2>
       <div>
        <label >名称</label>
        <input type="text" v-model="user.name">
       </div>
       <div>
             <label for="">性别</label>
             <input type="radio" name="sex" v-model="user.sex" value="男">男
             <input type="radio" name="sex" v-model="user.sex" value="女">女
       </div>
       <h2>信息</h2>
       <p>名称：{{ user.name }}</p>
       <p>性别：{{ user.sex }}</p>
       <div>
           <label >心愿单：</label>
           <input type="checkbox" name="wish" v-model="user.wish" value="iphone">iphome
           <input type="checkbox" name="wish" v-model="user.wish" value="ipad">ipad
           <input type="checkbox" name="wish" v-model="user.wish" value="iwatch">iwatch
           <input type="checkbox" name="wish" v-model="user.wish" value="其他">其他
       </div>
       <div>
        <label >组号：</label>
        <select v-model="user.group" style="width: 100px">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        
        </select>
       </div>
       <div>
        <label >备注:</label>
        <textarea v-model="user.remark"></textarea>
       </div>
      <p>名称：{{ user.name }}</p>
      <p>性别：{{ user.sex }}</p>
      <p>心愿单：{{ user.wish }}</p>
      <p>备注：{{ user.remark }}</p>
      
  
</template>

<script>
export default {
    data(){
        return{
            msg:"hello world",
            htmlSpan:"<span>这是HTML标签</span>",
            imgUrl:"//www.baidu.com/img/flexible/logo/pc/index@2.png",
            isActive:true,
            num :0,
            arr:['tom','jerry','dog','host'],
            obj:{
                a:'tom',
                b:'jerry',
                c:'dog',
                d:'host'
            },
            user:{
            name:"",
            sex:"男",
            wish:[],
            group:'',
            remark:''
          }
        }
    },
    methods:{
        btnAction(){
            console.log("123");
            console.log('this.msg',this.msg);
            this.test() 
        },
        test(){
            console.log("这是一个test方法");
        },
        switcgInsActive(){
           this.isActive = !this.isActive
        },
        changeNUm(number){
            this.num = number
            
        }
    }
    
}
</script>